<template>
	<view class="container">
		<!--内容部分-->
		<tui-list-cell padding="0" :lineLeft="false" :arrow="true" @click="toPage('../my/userinfo')">
			<view class="tui-list-cell tui-info-box">
				<image :src="$cdn.appAvatar+headPic" class="tui-avatar"></image>
				<view>{{userName}}</view>
			</view>
			<!-- <tui-icon name="shop-fill" size="60" color="#ed3f14"></tui-icon> -->
			<!-- <view class="tui-list-cell-name">大卫David</view> -->
			<!-- <view class="tui-right">个人中心</view> -->
		</tui-list-cell>

		<tui-list-view class="tui-list-view">
			<tui-list-cell @click="toPage('/pages/discover/face_result')" :arrow="true" class="tui-list" :last="true">
				<tui-icon name="camera" :size="30" color="#5677fc"></tui-icon>
				<view class="tui-list-cell-name">颜值扫描</view>
			</tui-list-cell>
		</tui-list-view>

		<tui-list-view class="tui-list-view">
			<tui-list-cell @click="toPage('about?title=商户合作')" :arrow="true" class="tui-list" >
				<tui-icon name="shop" :size="30" color="#5677fc"></tui-icon>
				<view class="tui-list-cell-name">商户合作</view>
				<!-- <view class="tui-right">进入店铺</view> -->
			</tui-list-cell>
			<tui-list-cell @click="toPage('../login/agreement')" :arrow="true" class="tui-list" >
				<tui-icon name="shop" :size="30" color="#5677fc"></tui-icon>
				<view class="tui-list-cell-name">用户协议</view>
				<!-- <view class="tui-right">进入店铺</view> -->
			</tui-list-cell>
			<tui-list-cell @click="toPage('about?title=关于我们')" :arrow="true" class="tui-list" :last="true">
				<tui-icon name="about" :size="30" color="#5677fc"></tui-icon>
				<view class="tui-list-cell-name">关于我们</view>
				<!-- <tui-tag size="small" type="light-green" shape="circle" class="tui-right">探索发现</tui-tag> -->
			</tui-list-cell>
		</tui-list-view>

		<tui-list-view class="tui-list-view">
			<tui-list-cell open-type="feedback" :arrow="true" class="tui-list">
				<tui-icon name="feedback" :size="30" color="#5677fc"></tui-icon>
				<view class="tui-list-cell-name">反馈建议</view>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">请帮助我们改进</tui-tag>
			</tui-list-cell>
			<tui-list-cell open-type="share" :arrow="true" class="tui-list" :last="true">
				<tui-icon name="share" :size="30" color="#5677fc"></tui-icon>
				<view class="tui-list-cell-name">分享</view>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">感谢您的推广</tui-tag>
			</tui-list-cell>
		</tui-list-view>

		<view class="tui-btm"><tui-button shape="circle" @tap="openActionSheet" type="warning">退出登录</tui-button></view>
		<!--内容部分-->
		
		<tui-actionsheet :show="showActionSheet" :item-list="itemList"
		:tips="tips" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import tuiListView from '@/components/list-view/list-view';
import tuiListCell from '@/components/list-cell/list-cell';
import tuiIcon from '@/components/icon/icon';
import tuiTag from '@/components/tag/tag';
import tuiBadge from '@/components/badge/badge';
import tuiButton from '@/components/extend/button/button';
import tuiActionsheet from '@/components/actionsheet/actionsheet';
export default {
	computed: mapState(['isLogin', 'token', 'headPic','userName','sign','sex','birthday']),
	components: {
		tuiListView,
		tuiListCell,
		tuiIcon,
		tuiTag,
		tuiBadge,
		tuiButton,
		tuiActionsheet
	},
	data() {
		return {
			$cdn:this.$cdn,
			showActionSheet: false,
			tips: '退出登录会清除您的登录信息，确认退出吗？',
			itemList:[{
				text: "退出登录",
				color: "#e53a37"
			}]
		};
	},
	methods: {
		...mapMutations(['logout']),
		logoutByEnd: function() {
			this.logout();
			this.tui.toast('退出成功', 2000, true);
			setTimeout(() => {
				uni.reLaunch({
					url: '../my/my'
				});
			}, 300);
		},
		toPage: function(url) {
			uni.navigateTo({
				url: url
			});
		},
		closeActionSheet: function() {
			this.showActionSheet = false;
		},
		openActionSheet: function() {
			this.showActionSheet = true;
		},
		itemClick: function(e) {
			let index = e.index;
			if (index == 0) {
				this.showActionSheet = false;
				this.logoutByEnd();
			}
		}
	}
};
</script>

<style>
.container {
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-list-view {
	padding-top: 18rpx !important;
}

.tui-list-cell-name {
	padding-left: 20upx;
	vertical-align: middle;
	line-height: 30upx;
}

.tui-list::after {
	left: 94upx !important;
}

.tui-right {
	margin-left: auto;
	margin-right: 34upx;
	font-size: 26upx;
	line-height: 1;
	color: #999;
}

.logo {
	height: 40upx;
	width: 40upx;
}

.tui-flex {
	display: flex;
	align-items: center;
}

.tui-msg-box {
	display: flex;
	align-items: center;
}

.tui-msg-pic {
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	display: block;
	margin-right: 24upx;
}

.tui-msg-item {
	max-width: 500upx;
	min-height: 80upx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tui-msg-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 34upx;
	line-height: 1;
	color: #262b3a;
}

.tui-msg-content {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 26upx;
	line-height: 1;
	color: #9397a4;
}

.tui-msg-right {
	max-width: 120upx;
	height: 88upx;
	margin-left: auto;
	text-align: right;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.tui-msg-right.tui-right-dot {
	height: 76upx;
	padding-bottom: 10upx;
}

.tui-msg-time {
	width: 100%;
	font-size: 24upx;
	line-height: 24upx;
	color: #9397a4;
}

.tui-badge {
	width: auto;
}

.tui-msg::after {
	left: 154upx !important;
}

/* 退出按钮 */
.tui-btm {
	margin-top: 80rpx;
	padding: 0 25rpx;
}

/* 头像 */
.tui-list-cell {
	display: flex;
	align-items: center;
	padding: 24rpx 30rpx;
	font-size: 30rpx;
}
.tui-info-box {
	font-size: 34rpx;
}

.tui-avatar {
	width: 140rpx;
	height: 140rpx;
	margin-right: 20rpx;
	border-radius: 10%;
}

.tui-mtop {
	margin-top: 20rpx;
}

.tui-exit {
	padding: 100rpx 24rpx;
}
</style>
